<template>
    <section>
        <el-row :gutter="40">
            <el-col :span="14">
                    <el-tag type="gray" style="margin: 10px">部门</el-tag>
                    <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
                <el-tree
                        ref="productType"
                        v-loading="treeLoading"
                        :data="data2"
                        :props="defaultProps"
                        node-key="FID"
                        @current-change="onDeptChange"
                        highlight-current
                        :render-content="renderContent">
                </el-tree>
            </el-col>
            <el-col :span="10">
                <sy-baselist
                        ref="deptUser"
                        title="成员"
                        :hideHeader="false"
                        :hideEdit="true"
                        @beforeAdd="beforeAddUser"
                        :autoSearch = "false"
                        editVue="./system/User_Select2.vue"
                        listUrl="server/system/DeptUser.ashx?cmd=GetList"
                        deleteUrl="server/system/DeptUser.ashx?cmd=Delete"
                >
                    <el-table-column prop="FUserName" label="用户名" width="200" sortable>
                    </el-table-column>
                </sy-baselist>

                <el-dialog :title="tit" v-model="treeFormVisible" :close-on-click-modal="false">
                    <el-form :model="treeForm"  label-width="110px">
                        <el-form-item label="部门名称">
                            <el-input v-model="treeForm.FName"></el-input>
                        </el-form-item>
                        <el-form-item label="部门负责人">
                            <el-input v-model="treeForm.FLeader"></el-input>
                        </el-form-item>
                        <el-form-item label="总监">
                            <el-input v-model="treeForm.FUpLeader"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="treeForm.FNote"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click.native="treeFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="saveTree" :loading="formLoading">保存</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
    </section>
</template>

<script>
    import util from '../../common/util'
    export default {
        data(){
            return {
                FDeptID:0,
                data2: [],
                selectNodeData:{},
                defaultProps: {
                    children: 'children',
                    label: 'FName'
                },
                treeForm:{},
                treeFormVisible:false,
                treeLoading:false,
                formLoading:false,
                tit:''
            }
        },
        methods:{
                onDeptChange(row,oldRow){
                if(row) {
                    this.FDeptID = row.FID;
                    this.$refs.deptUser._search("FDeptID=" + row.FID);
                }
            },
            ////////////////////////用户//////////////////////////////////
            beforeAddUser(row,r){
                if(this.FDeptID==0) {
                    return r.error = "请先选择团队";
                }
                row.FDeptID = this.FDeptID
            },
            switchLoading(flag){
                this.treeLoading = flag;
            },
            switchFormLoading(flag){
                this.formLoading = flag;
            },
            handleAdd:function(){
                this.treeFormVisible = true
                this.selectNodeData = null;
                this.treeForm = {id:0,FID:0,FParent:0,FVisable_Vue:true,FLevel:1,
                    FUrl_Vue:"/",FRequire_Vue:"Home.vue",FIconCls_Vue:"el-icon-message"}
                this.store = null;
                this.tit='新增';
            },
            saveTree(){
                util.post("server/system/Dept.ashx?cmd=Save",this.treeForm,this.switchFormLoading,result=> {
                    util.msgSuc("保存成功")
                    this.treeFormVisible = false
                    if(this.treeForm.FID==0){
                        this.treeForm.FID = result.FID
                        if(this.store) {
                            this.refrash()
                        }else{
                            //刷新
                            this.refrash()
                        }
                    }else{
                        if(this.selectNodeData) {
                            this.refrash()
                        }else{
                            this.refrash()
                        }
                    }
                })
            },
            append(store, data,node) {
                this.treeFormVisible = true
                this.selectNodeData = data;
                this.treeForm = {id:0,FID:0,FParentID:data.FID};
                //如果是权限项
                // if(data.FUrl_Vue=="/"){
                //     this.treeForm.FLevel = 2
                //  }else{
                //      this.treeForm.FUrl_Vue ="#"
                //     this.treeForm.FLevel = 3
                // }
                this.store = store;
                this.tit='新增子部门';
                //store.append({ id: 1000, label: 'testtest', children: [] }, data);
            },
            edit(store, data,node) {
                this.treeFormVisible = true
                this.selectNodeData = data
                this.treeForm = Object.assign({},data)
                this.store = store;
                this.tit='修改';
                //store.append({ id: 1000, label: 'testtest', children: [] }, data);
            },
            remove(store, data,node) {
                // TO-DO: 需要提示是否删除
                let url = "server/system/Dept.ashx?cmd=Delete"
                util.post(url, {FID:data.FID},this.switchLoading,result=> {
                    util.msgSuc("删除成功")
                    store.remove(data);
                })
            },
            renderContent(h, { node, data, store }) {
                return (
                    <span>
                    <span>
                    <span>{node.label}</span>
                </span>
                <span style="float: right; margin-right: 20px">
                    <el-button size="mini" on-click={ () => {this.append(store, data,node);event.stopPropagation()}}>添加下级</el-button>
                <el-button size="mini" on-click={ () =>{this.edit(store, data,node);event.stopPropagation()} }>修改</el-button>
                <el-button size="mini" type="danger" on-click={ () => {this.remove(store, data,node);event.stopPropagation()} }>删除</el-button>
                </span>
                </span>);
            },
            refrash(){
                util.get("server/system/Dept.ashx?cmd=GetDeptTree","",this.switchLoading,result=> {
                    this.data2 = result.data;
                });
            }
        },
        mounted() {
            this.refrash()
        }
    }
</script>